<template>
    <el-dialog
            v-model="dialogVisible"
            :before-close="handleClose"
            title="选择营销任务"
            width="50%"
    >

        <el-table
                :data="tableData"
                border
                header-cell-class-name="table-header"
                highlight-current-row
                max-height="350"
                size="small"
                @current-change="handleCurrentChange"
        >
            <el-table-column
                    fixed="left"
                    :min-width="100"
                    header-align="center"
                    label="任务编号"
                    prop="taskNo"
                    show-overflow-tooltip
            />
            <el-table-column
                    :min-width="100"
                    align="center"
                    label="任务类型"
            >
                <template #default="scope">
                    {{getLabel('task_type',scope.row.taskType)}}
                </template>
            </el-table-column>
            <el-table-column
                    align="left"
                    header-align="center"
                    label="通用名"
                    prop="productPopularName"
                    show-overflow-tooltip
                    width="150"
            />
            <el-table-column
                    label="商品名"
                    prop="productName"
                    show-overflow-tooltip
                    width="100"
            />
            <el-table-column
                    label="包装规格"
                    prop="packSpecs"
                    show-overflow-tooltip
                    width="100"
            />
            <el-table-column
                    label="生产厂家"
                    prop="producer"
                    show-overflow-tooltip
                    width="100"
            />
            <el-table-column
                    fixed="right"
                    :min-width="150"
                    header-align="center"
                    label="任务摘要"
                    prop="abstract"
                    show-overflow-tooltip
            />
        </el-table>

        <template #footer>
            <div class="dialog-footer">
                <el-button size="small" @click="handleClose">取消</el-button>
                <el-button
                        type="primary"
                        size="small"
                        @click="dialogConfirm"
                >确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {crmStore} from "../../../store";
    import {
        defineComponent,
        getCurrentInstance,
        inject,
        reactive,
        toRefs,
    } from 'vue'

    export default defineComponent({
        name: 'chanceTaskDialog',
        props: {
            headId:{
                type:Number,
                default:0
            },
            productId:{
                type:Number,
                default:0,
            },
            taskType:{
                type:String,
                default:''
            }
        },
        emits: ['confirm'],
        setup(props, { emit }) {
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const userInfo = crmStore.getters['user/userInfo']

            var data = reactive({
                dialogVisible: false,
                selects: null,
                tableData: [],
                formData: {
                    page: 1,
                    pageSize: 20,
                    areas: [],
                    terminalType: '',
                    keyWord: '',
                    chanceStatus: '2',
                },
                total: 0,
            })

            const openDialog = () => {
                data.dialogVisible = true
                getList()
            }

            const getList = () => {
                let pam = {
                    headId:props.headId ? props.headId : userInfo.ID,
                    productId:props.productId,
                    taskType:props.taskType + ''
                }
                api.task
                    .TASK_ALLOCATION_AGENT_CONFIRM_LIST(pam)
                    .then((res) => {
                        if (res.code == 0) {
                            if (res.data != null) {
                                data.tableData = res.data.list
                            } else {
                                data.tableData = []
                            }
                        }
                    })
            }

            const handleClose = () => {
                data.dialogVisible = false
                data.selects = null
                data.total = 0
                data.tableData = []
                data.formData.page = 1
                data.formData.pageSize = 20
            }

            const dialogConfirm = () => {
                if (!data.selects) {
                    currentInstance.proxy.customMessage({
                        type: 'error',
                        message: '请选择营销任务',
                    })
                    return
                }
                // const str = data.selects.provinceName + data.selects.cityName + data.selects.areaName + data.selects.addressDetail

                emit('confirm', { ...data.selects })

                handleClose()
            }

            const handleCurrentChange = (val) => {
                data.selects = val
            }

            return {
                ...toRefs(data),

                openDialog,
                handleClose,
                dialogConfirm,
                handleCurrentChange,
            }
        },
    })
</script>

<style scoped>
</style>
